
<template>
  <div class="app-container">
    <div class="header">
      <el-form ref="queryFormRef" :inline="true" :model="queryParams">
        <el-form-item label="菜单名称" prop="keywords">
          <el-input v-model="queryParams.keywords" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <div class="util">
        <el-button type="primary" v-hasPermi="['sys:menu:add']" @click="add">
          <el-icon>
            <Plus />
          </el-icon>
          新增菜单
        </el-button>
      </div>
      <div class="table-wrap">
        <el-table :data="tableData" v-loading="loading" style="width: 100%" height="600" border default-expand-all row-key="id" class="table">
          <el-table-column prop="name" label="权限名称" />
          <el-table-column prop="type" label="权限类型" />
          <el-table-column prop="component" label="权限组件" />
          <el-table-column prop="path" label="权限路由" />
          <el-table-column prop="perm" label="权限标识" />
          <el-table-column prop="status" label="操作">
            <template #default="scope">
              <el-button type="primary" size="small" link icon="Edit" @click="edit(scope.row)" v-hasPermi="['sys:menu:edit']"> 编辑 </el-button>
              <el-button type="danger" size="small" link icon="Delete" @click="del(scope.row)" v-hasPermi="['sys:menu:delete']"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <MenuDrawer ref="menuDrawerRef" @success="handleSuccess"/>
  </div>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import MenuDrawer from './components/MenuDrawer.vue'
import { listMenu, delMenu } from '@/api/menus'

// 查询表单ref
const queryFormRef = ref<FormInstance>()
// 抽屉组件ref
const menuDrawerRef = ref()
// 遮罩层
const loading = ref(false)
// 查询参数
const queryParams = reactive({
  keywords: ''
})

// 表格数据
const tableData = ref([])

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const res = await listMenu(queryParams)
    tableData.value = res.data
  } catch (error: any) {
    ElMessage.error(error.msg || '查询失败')
  }finally {
    loading.value = false
  }
}

/** 查询按钮操作 */
const handleQuery = () => {
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 新增按钮操作 */
const add = (row?: any) => {
  menuDrawerRef.value.show(row)
}

/** 编辑按钮操作 */
const edit = (row: any) => {
  menuDrawerRef.value.show(row)
}

/** 删除按钮操作 */
const del = (row: any) => {
  ElMessageBox.confirm(
    `是否确认删除名称为"${row.name}"的数据项?`,
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  )
    .then(async () => {
      try {
        await delMenu(row.id)
        ElMessage.success('删除成功')
        getList()
      } catch (error: any) {
        ElMessage.error(error.msg || '删除失败')
      }
    })
    .catch(() => {})
}

/** 抽屉提交成功回调 */
const handleSuccess = () => {
  getList()
}

// 初始化
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

.footer {

  display: flex;
  padding: 16px;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;

  .util {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .table-wrap {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .table-inner {
    width: 100%;
    height: 100%;
    position: relative;
  }

}
</style>
